<template>
  <div id="reward">
    <button class="reward-botton" type="button">
      <Icon type="ios-bowtie" />
      <span> 赞赏</span>
      <div class="reward-main">
        <ul class="reward-all">
          <li class="reward-item">
            <img class="qrcode-img" src="http://cdn.yozora.top/alipay.jpg" alt="alipay">
            <div class="qrcode-desc">alipay</div>
          </li>
          <li class="reward-item">
            <img src="http://cdn.yozora.top/wechat_pay.jpg" alt="wechat">
            <div class="qrcode-desc">wechat</div>
          </li>
        </ul>
      </div>
    </button>
  </div>
</template>

<script>
import { initReward } from "utils/utils"

export default {
  name: 'Reward',
  mounted() {
    (function() {
      initReward()
    })()
  },
}
</script>

<style lang="scss" scoped>
#reward {
  position: relative;
  margin-top: 4rem;
  width: 100%;
  text-align: center;
  .reward-botton {
    padding: 0.5rem 1.2rem;
    background: #ff8244;
    color: #fff;
    border-radius: 5px;
    border: none;
    .reward-main {
      position: absolute;
      z-index: 100;
      left: 0;
      bottom: 40px;
      padding: 0 0 15px;
      width: 100%;
      display: none;
      &.reward-show {
        display: block;
        animation: to_show 0.5s;
        @keyframes to_show {
          0% {
            opacity: 0;
            transform: translateY(-20px);
          }
          100% {
            opacity: 1;
            transform: translateY(0px);
          }
        }
      }
      .reward-all {
        display: inline-block;
        margin: 0;
        padding: 1rem 0.5rem;
        border-radius: 4px;
        background: #f5f5f5;
        &:after {
          position: absolute;
          bottom: -10px;
          left: 0;
          width: 100%;
          height: 20px;
          content: '';
        }
        &:before {
          position: absolute;
          right: 0;
          bottom: 2px;
          left: 0;
          margin: 0 auto;
          width: 0;
          height: 0;
          border-top: 13px solid #f5f5f5;
          border-right: 13px solid transparent;
          border-left: 13px solid transparent;
          content: '';
        }
        .reward-item {
          display: inline-block;
          padding: 0 8px;
          list-style-type: none;
          vertical-align: top;
          img {
            display: block;
            width: 200px;
            height: 200px;
          }
          .qrcode-desc {
            color: #858585;
            padding-top: 0.5rem;
          }
        }
      }
    }
  }
}
</style>>
